<template>
  <v-container fluid>
    <!-- Loading overlay -->
    <v-overlay :value="loading">
      <v-progress-circular indeterminate size="64"></v-progress-circular>
    </v-overlay>

    <!-- Error snackbar -->
    <v-snackbar v-model="showError" color="error" timeout="3000">
      {{ errorMessage }}
      <template v-slot:action="{ attrs }">
        <v-btn text v-bind="attrs" @click="showError = false">关闭</v-btn>
      </template>
    </v-snackbar>

    <!-- Refresh button -->
    <v-row class="mb-4">
      <v-col cols="12" class="d-flex justify-end">
        <v-btn
          color="primary"
          @click="fetchAllData"
          :loading="loading"
          class="mr-4"
        >
          <v-icon left>refresh</v-icon>
          刷新数据
        </v-btn>
      </v-col>
    </v-row>

    <!-- 统计卡片 -->
    <v-row class="mb-2">
      <v-col cols="12" sm="6" md="3" v-for="item in panels" :key="item.name">
        <v-card class="dashboard-card stat-card">
          <v-card-text>
            <div class="d-flex align-center mb-2">
              <v-icon :color="item.iconColor" size="24" class="mr-2">{{ item.icon }}</v-icon>
              <span class="text-subtitle-1 font-weight-medium">{{ item.name }}</span>
            </div>
            <div class="text-h4 font-weight-bold mb-2">{{ formatValue(item.value, item.type) }}</div>
            <div class="d-flex align-center text-caption">
              <v-icon size="16" color="green" class="mr-1">update</v-icon>
              <span class="grey--text">根据爬虫数据更新</span>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- 年度与类型分析分组 -->
    <div class="group-title"><span>年度与类型分析</span></div>
    <v-row class="mb-12">
      <v-col cols="12" sm="12" lg="6" v-for="(comp, idx) in dash1Charts" :key="'d1-'+idx">
        <v-card class="dashboard-card chart-card">
          <v-card-title class="chart-title">{{ getChartTitle(comp.component) }}</v-card-title>
          <div class="chart-wrapper">
            <component :is="comp.component" v-bind="comp.props || {}" />
          </div>
        </v-card>
      </v-col>
    </v-row>

    <!-- 全球与类型分布分组 -->
    <div class="group-title mb-6"><span>全球与类型分布</span></div>
    <v-row>
      <v-col cols="12" sm="12" lg="6" v-for="(comp, idx) in dash2Charts" :key="'d2-'+idx">
        <v-card class="dashboard-card chart-card">
          <v-card-title class="chart-title">{{ getChartTitle(comp.component) }}</v-card-title>
          <div class="chart-wrapper">
            <component :is="comp.component" v-bind="comp.props || {}" />
          </div>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { dashboardConfig } from '../Dash1/config';
import SciFiRating from '../Dash1/charts/SciFiRating.vue';
import SciFiWordcloud from '../Dash1/charts/SciFiWordcloud.vue';
import SciFiGenre from '../Dash1/charts/SciFiGenre.vue';
import LineAreaChart from '../Dash1/charts/LineAreaChart.vue';
import LineBigDataChart from '../Dash1/charts/LineBigDataChart.vue';
import LineTypeRatingChart from '../Dash1/charts/LineTypeRatingChart.vue';
import BarBaseChart from './charts/BarBaseChart.vue';
import BarBaseChart2 from './charts/BarBaseChart2.vue';
import BasePieChart from "./charts/BasePieChart";
import BasePieChart2 from "./charts/BasePieChart2";
import RatingBarChart from "./charts/RatingBarChart";
import RatingPieChart from "./charts/RatingPieChart";
import { getSciFiAnalysis } from "../../../api/movie";

export default {
  name: "Dash2",
  components: {
    LineAreaChart,
    LineBigDataChart,
    SciFiRating,
    SciFiWordcloud,
    SciFiGenre,
    LineTypeRatingChart,
    BarBaseChart,
    BarBaseChart2,
    BasePieChart,
    BasePieChart2,
    RatingBarChart,
    RatingPieChart
  },
  data: () => ({
    loading: false,
    showError: false,
    errorMessage: '',
    panels: [],
    sciFiData: null
  }),
  computed: {
    dash1Charts() {
      return [
        { component: 'LineBigDataChart' },
        { component: 'LineAreaChart' },
        { component: 'LineTypeRatingChart' },
        { component: 'SciFiRating', props: { data: this.sciFiData } },
        { component: 'SciFiWordcloud', props: { data: this.sciFiData } },
        { component: 'SciFiGenre', props: { data: this.sciFiData } }
      ];
    },
    dash2Charts() {
      return [
        { component: 'BarBaseChart' },
        { component: 'BasePieChart' },
        { component: 'BarBaseChart2' },
        { component: 'BasePieChart2' },
        { component: 'RatingBarChart', title: '评分分布柱状图' },
        { component: 'RatingPieChart', title: '评分分布饼图' }
      ];
    }
  },
  methods: {
    async fetchDashboardData() {
      try {
        this.panels = dashboardConfig.panels;
      } catch (error) {
        this.errorMessage = '获取数据失败，请稍后重试';
        this.showError = true;
        throw error;
      }
    },
    async fetchSciFiData() {
      try {
        const response = await getSciFiAnalysis();
        this.sciFiData = response.data.data;
      } catch (error) {
        this.errorMessage = '获取科幻电影数据失败，请稍后重试';
        this.showError = true;
        throw error;
      }
    },
    async fetchAllData() {
      this.loading = true;
      try {
        await Promise.all([
          this.fetchDashboardData(),
          this.fetchSciFiData()
        ]);
      } catch (error) {
        console.error('Failed to fetch data:', error);
      } finally {
        this.loading = false;
      }
    },
    formatValue(value, type) {
      if (typeof value === 'number') {
        if (type === 'score') {
          return value.toFixed(5);
        } else if (type === 'count') {
          return value.toLocaleString();
        }
      }
      return value;
    },
    getChartTitle(component) {
      const titles = {
        'LineBigDataChart': '年度电影数量趋势',
        'LineAreaChart': '类型分布趋势',
        'LineTypeRatingChart': '评分趋势分析',
        'SciFiRating': '科幻电影评分',
        'SciFiWordcloud': '热门关键词',
        'SciFiGenre': '科幻电影类型',
        'BarBaseChart': '地区分布',
        'BasePieChart': '类型占比',
        'BarBaseChart2': '类型分布',
        'BasePieChart2': '年代分布',
        'RatingBarChart': '评分分布柱状图',
        'RatingPieChart': '评分分布饼图'
      };
      return titles[component] || component;
    }
  },
  created() {
    this.fetchAllData();
  }
}
</script>

<style scoped>
.dashboard-card {
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  margin-bottom: 24px;
  background: #18181c;
  overflow: hidden;
  transition: all 0.3s ease;
}
.dashboard-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.15);
}
.stat-card {
  min-height: 120px;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.chart-card {
  min-height: 600px;
  display: flex;
  flex-direction: column;
}
.chart-title {
  padding: 16px 24px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
}
.chart-wrapper {
  width: 100%;
  height: 560px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2dd4bf;
  border-left: 4px solid #2dd4bf;
  padding: 12px 16px;
  margin-bottom: 24px;
  letter-spacing: 1px;
  background: rgba(45, 212, 191, 0.08);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 12px rgba(45, 212, 191, 0.1);
  backdrop-filter: blur(8px);
}
.text-h4 {
  font-size: 2rem !important;
  line-height: 1.2;
}
@media (max-width: 1264px) {
  .chart-card { min-height: 520px; }
  .chart-wrapper { height: 480px; }
}
@media (max-width: 960px) {
  .chart-card { min-height: 460px; }
  .chart-wrapper { height: 420px; }
  .group-title { 
    font-size: 1.3rem;
    padding: 10px 14px;
    background: rgba(45, 212, 191, 0.06);
  }
  .chart-title {
    font-size: 1.1rem;
    padding: 14px 20px;
  }
  .text-h4 {
    font-size: 1.5rem !important;
  }
}
@media (max-width: 600px) {
  .chart-card { min-height: 400px; }
  .chart-wrapper { 
    height: 360px;
    padding: 16px;
  }
  .group-title { 
    font-size: 1.1rem;
    padding: 8px 12px;
    background: rgba(45, 212, 191, 0.04);
  }
  .chart-title {
    padding: 12px 16px;
    font-size: 1rem;
  }
}
</style>
